<template>
  <div class="contains" style="padding-bottom: 10px">
    <!--图表展示-->
    <div class="clearfix">
      <div ref="zcChart" class="item-chart"></div>
      <div ref="cpjChart" class="item-chart"></div>
      <div ref="cqjChart" class="item-chart"></div>
      <div ref="xflChart" class="item-chart"></div>
      <div ref="yflChart" class="item-chart"></div>
      <div ref="zflChart" class="item-chart"></div>
    </div>
    <!--数据表格-->
    <el-table border size="mini" :data="dataList" :header-cell-style="{ color: '#909399', textAlign: 'center', fontSize: '12px' }" :cell-style="{ color: 'black', textAlign: 'center', fontSize: '12px' }">
      <el-table-column v-for="(val, key) in tableLable" :key="key" :prop="key" :label="val"> </el-table-column>
    </el-table>

    <!-- <li class="search-item">
      <input class="default-button" type="button" value="导出" @click="exportData()" />
    </li>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table> -->
  </div>
</template>

<script>
import { formarTime, export2Excel } from '../../js/utils.js'

export default {
  name: 'QuanYaoSu',
  data() {
    return {
      tableLable: {
        timesTamp: '时间',
        totalField: '总场（nT）',
        magneticAngle: '磁偏角（°）',
        magneticInclination: '磁倾角（°）',
        northboundComponent: 'X（nT）',
        verticalComponents: 'Y（nT）',
        sastorientedComponent: 'Z（nT）'
      },
      currentIns: '',
      zcChart: null,
      cpjChart: null,
      cqjChart: null,
      xflChart: null,
      yflChart: null,
      zflChart: null,
      interval: null,
      dataList: []
    }
  },
  methods: {
    // 初始化
    init() {
      var that = this
      this.zcChart = this.$echarts.init(this.$refs.zcChart)
      this.cpjChart = this.$echarts.init(this.$refs.cpjChart)
      this.cqjChart = this.$echarts.init(this.$refs.cqjChart)
      this.xflChart = this.$echarts.init(this.$refs.xflChart)
      this.yflChart = this.$echarts.init(this.$refs.yflChart)
      this.zflChart = this.$echarts.init(this.$refs.zflChart)
      this.getData()
      this.interval = setInterval(function () {
        that.getData()
      }, 5000)
    },

    // 获取数据
    getData() {
      var that = this
      this.$http({
        method: 'post',
        url: '/finddatabytop',
        data: {
          top: 60
        }
      })
        .then(function (res) {
          console.log(res)
          if (res.data && res.data.code === 200) {
            // console.log(res.data);
            // console.log(res.data.data);
            that.dataList = res.data.data
            var list = res.data.data,
              date = [],
              zc = [],
              cpj = [],
              cqj = [],
              xfl = [],
              yfl = [],
              zfl = []
            // for (var i = list.length - 1; i >= 0; i--) {
            for (var i = 0; i <= list.length - 1; i++) {
              date.push(formarTime(list[i].timesTamp))
              zc.push(list[i].totalField.toFixed(2))
              cpj.push(list[i].magneticAngle.toFixed(4))
              cqj.push(list[i].magneticInclination.toFixed(4))
              xfl.push(list[i].northboundComponent.toFixed(2))
              yfl.push(list[i].verticalComponents.toFixed(2))
              zfl.push(list[i].sastorientedComponent.toFixed(2))
            }
            that.initZcChart(date, zc)
            that.initCpjChart(date, cpj)
            that.initCqjChart(date, cqj)
            that.initXflChart(date, xfl)
            that.initYflChart(date, yfl)
            that.initZflChart(date, zfl)
          } else {
            that.$message.warning(res.data.msg)
          }
        })
        .catch(function (err) {
          console.log(err)
        })
    },

    // 初始化总场图表
    initZcChart(date, data) {
      // console.log(date, data);
      this.zcChart.setOption({
        title: {
          text: '总\n场',
          backgroundColor: '#D8E2FB',
          borderColor: '#000',
          borderWidth: 0.5,
          borderRadius: 5,
          top: '30%',
          left: 10,
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 30,
          right: 10,
          bottom: 50,
          left: 30,
          containLabel: true
        },
        xAxis: {
          data: date
        },
        yAxis: {
          type: 'value',
          name: '单位：nT',
          min: function (value) {
            return value.min
          },
          max: function (value) {
            return value.max
          }
        },
        dataZoom: [
          {
            type: 'slider',
            start: 1,
            end: 100
          }
        ],
        series: {
          name: '总场',
          type: 'line',
          smooth: true,
          data: data
        }
      })
    },
    // 初始化偏角图表
    initCpjChart(date, data) {
      // console.log(date, data);
      this.cpjChart.setOption({
        title: {
          text: '偏\n角',
          backgroundColor: '#D8E2FB',
          borderColor: '#000',
          borderWidth: 0.5,
          borderRadius: 5,
          top: '30%',
          left: 10,
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 30,
          right: 10,
          bottom: 50,
          left: 30,
          containLabel: true
        },
        xAxis: {
          data: date
        },
        yAxis: {
          type: 'value',
          name: '单位：°(度)',
          min: function (value) {
            return value.min
          },
          max: function (value) {
            return value.max
          }
        },
        dataZoom: [
          {
            type: 'slider',
            start: 1,
            end: 100
          }
        ],
        series: {
          name: '偏角',
          type: 'line',
          smooth: true,
          data: data
        }
      })
    },
    // 初始化倾角图表
    initCqjChart(date, data) {
      // console.log(date, data);
      this.cqjChart.setOption({
        title: {
          text: '倾\n角',
          backgroundColor: '#D8E2FB',
          borderColor: '#000',
          borderWidth: 0.5,
          borderRadius: 5,
          top: '30%',
          left: 10,
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 30,
          right: 10,
          bottom: 50,
          left: 30,
          containLabel: true
        },
        xAxis: {
          data: date
        },
        yAxis: {
          type: 'value',
          name: '单位：°(度)',
          min: function (value) {
            return value.min
          },
          max: function (value) {
            return value.max
          }
        },
        dataZoom: [
          {
            type: 'slider',
            start: 1,
            end: 100
          }
        ],
        series: {
          name: '倾角',
          type: 'line',
          smooth: true,
          data: data
        }
      })
    },
    // 初始化X分量图表
    initXflChart(date, data) {
      // console.log(date, data);
      this.xflChart.setOption({
        title: {
          text: 'X\n分\n量',
          backgroundColor: '#D8E2FB',
          borderColor: '#000',
          borderWidth: 0.5,
          borderRadius: 5,
          top: '30%',
          left: 10,
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 30,
          right: 10,
          bottom: 50,
          left: 30,
          containLabel: true
        },
        xAxis: {
          data: date
        },
        yAxis: {
          type: 'value',
          name: '单位：nT',
          min: function (value) {
            return value.min
          },
          max: function (value) {
            return value.max
          }
        },
        dataZoom: [
          {
            type: 'slider',
            start: 1,
            end: 100
          }
        ],
        series: {
          name: 'X分量',
          type: 'line',
          smooth: true,
          data: data
        }
      })
    },
    // 初始化Y分量图表
    initYflChart(date, data) {
      // console.log(date, data);
      this.yflChart.setOption({
        title: {
          text: 'Y\n分\n量',
          backgroundColor: '#D8E2FB',
          borderColor: '#000',
          borderWidth: 0.5,
          borderRadius: 5,
          top: '30%',
          left: 10,
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 30,
          right: 10,
          bottom: 50,
          left: 30,
          containLabel: true
        },
        xAxis: {
          data: date
        },
        yAxis: {
          type: 'value',
          name: '单位：nT',
          min: function (value) {
            return value.min
          },
          max: function (value) {
            return value.max
          }
        },
        dataZoom: [
          {
            type: 'slider',
            start: 1,
            end: 100
          }
        ],
        series: {
          name: 'Y分量',
          type: 'line',
          smooth: true,
          data: data
        }
      })
    },
    // 初始化Z分量图表
    initZflChart(date, data) {
      // console.log(date, data);
      this.zflChart.setOption({
        title: {
          text: 'Z\n分\n量',
          backgroundColor: '#D8E2FB',
          borderColor: '#000',
          borderWidth: 0.5,
          borderRadius: 5,
          top: '30%',
          left: 10,
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 30,
          right: 10,
          bottom: 50,
          left: 30,
          containLabel: true
        },
        xAxis: {
          data: date
        },
        yAxis: {
          type: 'value',
          name: '单位：nT',
          min: function (value) {
            return value.min
          },
          max: function (value) {
            return value.max
          }
        },
        dataZoom: [
          {
            type: 'slider',
            start: 1,
            end: 100
          }
        ],
        series: {
          name: 'Z分量',
          type: 'line',
          smooth: true,
          data: data
        }
      })
    }
  },
  // 实例创建完成
  created() {
    // this.getData()
  },
  // 模板编译完成
  mounted() {
    this.init()
    // this.exportData()
  },
  // 数据更新完毕
  updated() {
    // console.log('数据更新完毕');
  },
  // 实例销毁完成
  destroyed() {
    clearInterval(this.interval)
  }
}
</script>

<style></style>
